<template>
  <div id="cart">

      <!--头部区域-->
      <header class="titleWrapper">
        <div></div>
          <h4><strong>购物车</strong></h4>
          <span @click="clearCart">清空购物车</span>
      </header>
      <div class="contentWrapper">
          <!--中间内容-->
          <main class="contentWrapperList" v-for="(item,index) in cartList" :key="index">
              <section>
                  <div class="shopCartListCon">
                      <div class="left">
                          <a href="javascript:;" class="cartCheckBox" :checked="item.checked" @click="selectGoods(item)"></a>
                      </div>
                      <div class="center">
                          <img :src="item.small_image" alt="">
                      </div>
                      <div class="right">
                          <a href="#">{{item.goods_name}}</a>
                          <div class="bottomContent">
                              <p class="shopPrice">&yen;{{item.goods_price}}</p>
                              <div class="shopDeal">
                                  <span @click="sub(index)">-</span>
                                  <input disabled type="number" v-model="item.num">
                                  <span @click="add(index)">+</span>
                              </div>
                          </div>
                      </div>
                  </div>
              </section>
          </main>
          <!--底部通栏-->
          <div class="tabBar">
              <div class="tabBarLeft">
                  <a href="javascript:;" class="cartCheckBox" @click="allChecked(true)" :checked="checkAllFlag"></a>
                  <span style="font-size: 16px;">全选</span>
                  <div class="selectAll">
                      合计：<span class="totalPrice">{{totalPrice.sum}}</span>
                  </div>
              </div>
              <div class="tabBarRight">
                  <a href="#" class="pay" @click="account">去结算({{totalPrice.count}})</a>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
  import {getCartList,clear} from '../../api/cart'
  import { mapGetters } from 'vuex'
  import { Toast } from 'vant';
  import np from 'number-precision'

  export default {
    name: 'Cart',
    computed: {
      ...mapGetters(['getUserInfo']),
      // 计算总价
      totalPrice(val){
       let sum = 0
       let count = 0
       this.cartList.forEach((item) => {
          if(item.checked){
            count += item.num
            sum = np.plus(sum,np.times( item.goods_price,item.num))
          }
       })
       return {
         sum,count
       }
      }
    },
    data() {
      return {
        checkAll:true,
        cartList:[],
        show:false,
        checkAllFlag:true,

      }
    },
    // watch:{
    //   handler(val) {
    //     // 获取总价
    //     let sum = 0
    //     this.cartList.forEach((item) => {
    //       sum += item.goods_price * item.num
    //     })
    //     this.totalPrice = sum
    //   },
    //   // 解决引用值改变不触发
    //   deep:true,
    //   // 立即执行
    //   immediate:true
    // },
    created() {
      this.getCartList()
    },
    methods:{
      async getCartList(){
        try{
          const {data} = await getCartList(this.getUserInfo.token)
          if(data.success_code == 200){
            this.cartList = data.data
          }
        }catch(e){
          Toast('网络异常，请稍候重试')
        }
      },
      // 点击-
      add(idx) {
        this.cartList[idx].num++
      },
      // 点击+
      sub(idx) {
        if(this.cartList[idx].num<2){
          return false
        }
        this.cartList[idx].num--
      },
      // 清空购物车
      clearCart() {
        this.$dialog.confirm({
                 title: "确定删除",
                 confirmButtonText: "确认", //改变确认按钮上显示的文字
                 cancelButtonText: "取消" //改变取消按钮上显示的文字
        }).then(()=> {
                  window.localStorage.removeItem('cartList')
                  this.show = false
        }).catch(() => {
                  this.show = false
        })
      },

      // 去结算
      account() {
        this.$router.push('/confirmorder')
      },

      // 单选
      selectGoods(item) {
        item.checked = !item.checked
        let check = this.cartList.some((item) => {
          return !item.checked
        })
        this.checkAllFlag = !check
        this.totalPrice
      },

      // 全选
      allChecked(item) {
        if(this.checkAllFlag == true){
          for(let i=0;i<this.cartList.length;i++){
            this.cartList[i].checked = false
          }
        }else{
          for(let i=0;i<this.cartList.length;i++){
            this.cartList[i].checked = true
          }
        }
        this.checkAllFlag = !this.checkAllFlag
        this.totalPrice
      },
    }
  }
</script>

<style scoped>
  #cart{
      width: 100%;
      height: 100%;
      background-color: #f5f5f5;
  }

  .titleWrapper{
      width: 100%;
      height: 2.6rem;
      background: #fff;
      -webkit-background-size: 0.1rem 4.4rem;
      background-size: 0.1rem 4.4rem;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 999;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .titleWrapper h4{
    font-size: 35px;
  }
  .titleWrapper span{
    position: absolute;
    right: 10px;
    font-size: 28px;
    color: #FF0000;
  }
  .contentWrapper{
      padding-top: 3.5rem;

  }

  /*列表内容*/
  .contentWrapperList section{
      background-color: #fff;
  }

  .cartCheckBox{
      background: url(../../img/shop-icon.png) no-repeat;
      -webkit-background-size: 2.5rem 5rem;
      background-size: 2.5rem 5rem;
      width: 1rem;
      height: 1rem;
  }

  .cartCheckBox[checked]{
      background-position: -1.2rem 0;
  }

  .shopCartListCon{
      display: flex;
      height: 6rem;
      border-bottom:  0.01rem solid #e0e0e0;
      margin-bottom: 0.7rem;
      padding: 0.5rem 0;
  }

  .shopCartListCon .left{
      /*background: purple;*/
      flex: 1;
      display: flex;
      /*justify-content: center;*/
  }

  .shopCartListCon .left a{
      display: inline-block;
      margin-top: 0.8rem;
      margin-left: 0.5rem;
  }


  .shopCartListCon .center{
      /*background: blue;*/
      flex: 3;
  }

  .shopCartListCon .center img{
      width: 100%;
      height: 100%;
  }

  .shopCartListCon .right{
      /*background: orangered;*/
      flex: 6;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 0.5rem;
      margin-right: 0.5rem;

      position: relative;
  }

  .shopCartListCon .right a{
      height: 2.2rem;
      line-height: 1.2rem;
      overflow: hidden;
      margin-bottom: 0.3rem;
      font-size: 0.8rem;
      color: #000;
  }

  .shopCartListCon .bottomContent{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
  }

  .shopCartListCon .bottomContent .shopPrice{
      font-size: 0.8rem;
  }

  .shopCartListCon .right .shopDeal span{
      display: inline-block;
      width: 1rem;
      height: 1.2rem;
      line-height: 1.2rem;
      text-align: center;
      float: left;
  }

  .shopCartListCon .right .shopDeal input{
      float: left;
      width: 2rem;
      height: 1.2rem;
      text-align: center;
      margin: 0 0.2rem;
      font-size: 0.8rem;
  }

  /*底部通栏*/
  .tabBar{
      position: fixed;
      left:0;
      bottom:2.7rem;
      width:100%;
      height: 2.5rem;
      background-color: #fff;

      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 0.01rem solid #e0e0e0;
  }

  .tabBarLeft{
      display: flex;
      align-items: center;
      margin-left: 0.5rem;
  }

  .tabBarLeft .selectAll{
      margin-left: 1rem;
      font-size: 1rem;
  }

  .totalPrice{
      color: #E9232C;
  }


  .tabBarRight .pay{
      width:5rem;
      height: 2rem;
      background-color: #E9232C;
      border-radius: 1rem;
      margin-right: 0.5rem;

      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1rem;
      color: #fff;
  }
</style>
